layui.use(['form', 'layedit', 'laydate'], function() {
	var form = layui.form,
		layer = layui.layer,
		layedit = layui.layedit,
		laydate = layui.laydate;

	let elem = null, checkbooxData={};

	//日期
	laydate.render({
		elem: '#date'
	});


	$("body").on("click", ".towexin-table-item-show .layui-unselect", function(event) {
		event.stopPropagation();
	})
	$("body").on("click", ".towexin-table-item-show input", function(event) {
		event.stopPropagation();
	})

	// 修改属性
	$("body").on("click", ".towexin-table-item-show", function(event) {
		event.stopPropagation();

		if ($(this).find("input[type=radio]").length != 0||$(this).find("input[type=checkbox]").length != 0) {

			$("#set-attributes .set-disinput").hide();
			$("#set-attributes .set-type").hide();
			$("#set-attributes .set-title-option").show();
			$("#set-attributes .set-title-option").find(".input-option").html("")
			let options = []
			$(this).find("input[type=radio], input[type=checkbox]").each(function(index, elem) {
				if ($(elem).attr("disabled")) {
					options.push({
						title: $(elem).attr("title"),
						value: $(elem).attr("value"),
						checkbok: "true"
					});

					$("#set-attributes .set-title-option").find(".input-option").append($('<a href="javascript:;"></a>').append(
						$(
							"<span></span>").append($(elem).attr("title") + ": " + $(elem).attr("value")).attr({
							"towexin-value": $(elem).attr("value"),
							"towexin-title": $(elem).attr("title"),
							"towexin-check": "true"
						})).append($('<i class="layui-icon">ဆ</i>')).css("background-color", "#ff5722"));

				} else {
					options.push({
						title: $(elem).attr("title"),
						value: $(elem).attr("value"),
						checkbok: "false"
					});

					$("#set-attributes .set-title-option").find(".input-option").append($('<a href="javascript:;"></a>').append(
						$(
							"<span></span>").append($(elem).attr("title") + ": " + $(elem).attr("value")).attr({
							"towexin-value": $(elem).attr("value"),
							"towexin-title": $(elem).attr("title"),
							"towexin-check": "false"
						})).append($('<i class="layui-icon">ဆ</i>')));
				}


			})
			$(".set-title-option").find("input[name=set-option]").val(JSON.stringify(options));
		} else {
			if($(this).find("input").attr("disabled")){
				form.val('attributes-set', {
					"closeInput": true,
					"switchValueInput": "true"
				});
			}else{
				form.val('attributes-set', {
					"closeInput": false,
					"switchValueInput": ""
				});
			}
			if($(this).attr("towexin-check")=="name"||$(this).attr("towexin-check")=="date"){
				$("#set-attributes .set-type").hide();
			}else{
				$("#set-attributes .set-type").show();
			}
			$("#set-attributes .set-disinput").show();
			$("#set-attributes .set-title-option").hide();
		}

		$("#set-attributes").removeClass("layui-hide")
		$(".towexin-table-item-show").not(this).removeClass("active");
		$(this).addClass("active");
		elem = $(this);
		// console.log($(this))
		let title = $(this).find("label").text();
		let name = $(this).find("input").attr("name");
		let type = $(this).find("input").attr("type");
		let inputClass = $(this).children("div").attr("class")

		form.val('attributes-set', {
			"title": title,
			"field": name,
			"type": type,
			"width": inputClass
		});
	});


	//监听提交
	form.on('submit(set-submit)', function(data) {
		let options = JSON.parse($(".set-title-option").find("input[name=set-option]").val()?$(".set-title-option").find("input[name=set-option]").val():"[]");

		if (elem.find("input[type=radio]").length != 0) {
			elem.find("label").text(data.field.title);
			// elem.find("input").attr("name", data.field.field);
			data.field.width != "" ? elem.children("div").removeClass().addClass(data.field.width) : elem.children("div").removeClass()
				.addClass("layui-input-inline");

			elem.children(".layui-input-block").html("")
			for (let i = 0; i < options.length; i++) {
				// console.log(options[i])
				if (options[i].checkbok == "true") {
					elem.children(".layui-input-block").append($('<input type="radio" />').attr({
						"name": data.field.field,
						"value": options[i].value,
						"title": options[i].title,
						"disabled": ""
					}))
				} else {
					elem.children(".layui-input-block").append($('<input type="radio" />').attr({
						"name": data.field.field,
						"value": options[i].value,
						"title": options[i].title
					}))
				}
			}

		} else if (elem.find("input[type=checkbox]").length != 0) {
			elem.find("label").text(data.field.title);
			// elem.find("input").attr("name", data.field.field);
			data.field.width != "" ? elem.children("div").removeClass().addClass(data.field.width) : elem.children("div").removeClass()
				.addClass("layui-input-inline");
			
			if(elem.find("input[type=checkbox]").attr("lay-skin")){
				elem.children(".layui-input-block").html("")
				for (let i = 0; i < options.length; i++) {
					// console.log(options[i])
					if (options[i].checkbok == "true") {
						elem.children(".layui-input-block").append($('<input type="checkbox" />').attr({
							"name": data.field.field,
							"value": options[i].value,
							"title": options[i].title,
							"disabled": "",
							"lay-skin": "primary"
						}))
					} else {
						elem.children(".layui-input-block").append($('<input type="checkbox" />').attr({
							"name": data.field.field,
							"value": options[i].value,
							"title": options[i].title,
							"lay-skin": "primary"
						}))
					}
				}
			}else{
				elem.children(".layui-input-block").html("")
				for (let i = 0; i < options.length; i++) {
					// console.log(options[i])
					if (options[i].checkbok == "true") {
						elem.children(".layui-input-block").append($('<input type="checkbox" />').attr({
							"name": data.field.field,
							"value": options[i].value,
							"title": options[i].title,
							"disabled": ""
						}))
					} else {
						elem.children(".layui-input-block").append($('<input type="checkbox" />').attr({
							"name": data.field.field,
							"value": options[i].value,
							"title": options[i].title
						}))
					}
				}
			}
			
		} else {
			// console.log(data.field)
			elem.find("label").text(data.field.title);
			elem.find("input").attr("name", data.field.field);
			data.field.type != "" ? elem.find("input").attr("type", data.field.type) : elem.find("input").attr("type",
				"text");
			data.field.switchValueInput!=""?elem.find("input").attr("disabled", ""):elem.find("input").removeAttr("disabled");
			data.field.width != "" ? elem.children("div").removeClass().addClass(data.field.width) : elem.children("div").removeClass()
				.addClass("layui-input-inline");
		}

		form.render();
		return false;
	});

	//监听开关
	form.on('switch(set-option-switch)', function(data) {
		if (this.checked) {
			$(this).prev().val("true")
		} else {
			$(this).prev().val("false")
		}
	});
	
	form.on('switch(set-input-switch)', function(data) {
		if (this.checked) {
			$(this).prev().val("true")
		} else {
			$(this).prev().val("")
		}
	});
	
	$("body").on("click", ".towexin-table-option, .towexin-table-option-show", function(event) {
		event.stopPropagation();
		appendElem($(this).clone(), $("#diy-table"));
		
		form.render();
	})
	
	
	
	let appendElem = function(elem, toElem){
		elem.find("input").removeAttr("disabled");
		if (elem.attr("towexin-check") == "date") {
			id = (new Date()).getTime()
			elem.find("input").attr("id", "towexin" + id);
		
			elem.removeClass("towexin-table-option").removeClass("towexin-table-option-show").addClass("towexin-table-item-show").append($(
				"<span></span>").addClass("towexin-close-from-item").append($("<i></i>").addClass(
				"layui-icon layui-icon-close-fill"))).appendTo(toElem)
		
			laydate.render({
				elem: '#towexin' + id
			});
		} else {
			elem.removeClass("towexin-table-option").removeClass("towexin-table-option-show").addClass("towexin-table-item-show").append($(
				"<span></span>").addClass("towexin-close-from-item").append($("<i></i>").addClass(
				"layui-icon layui-icon-close-fill"))).appendTo(toElem)
		}
	}
	

	// 拖拽的函数
	var setup_draggable = function() {
		let id = ""
		$(".towexin-elem .towexin-table-option-show").draggable({
			cursor: "move",
			appendTo: "#diy-table",
			helper: "clone"
		});
		
		$(".towexin-base .towexin-table-option").draggable({
			cursor: "move",
			appendTo: "body",
			helper: "clone"
		});
		
		$("#diy-table").droppable({
			accept: ".towexin-table-option, .towexin-table-option-show",
			helper: "clone",
			hoverClass: "towexin-active",
			drop: function(event, ui) {
				let elem = $(ui.draggable).clone();
				appendElem(elem, $(this));
			},
			deactivate: function(event, ui) {
				form.render();
			}
		}).sortable({
			cursor: "s-resize"
		});

		$(".input-option").sortable({
			cursor: "move",
			deactivate: function(event, ui) {
				let options = []
				$(".input-option").find("a").each(function(index, elem) {
					options.push({
						title: $(elem).find("span").attr("towexin-title"),
						value: $(elem).find("span").attr("towexin-value")
					})
				})
				$(".set-title-option").find("input[name=set-option]").val(JSON.stringify(options));
			}
		});
	};

	// 执行拖拽函数
	setup_draggable();

	$("#set-attributes").addClass("layui-hide");

	$("body").on("click", ".towexin-close-from-item", function(event) {
		event.stopPropagation();
		$(this).parent().remove();
	})

	$(".options-center, .options-left").on("click", function() {
		$("#set-attributes").addClass("layui-hide");
		$(".towexin-table-item-show").removeClass("active");
	})

	// 删除选项
	$("body").on("click", ".set-title-option .option-in a i", function(event) {
		event.stopPropagation();

		let options = JSON.parse($(".set-title-option").find("input[name=set-option]").val());
		let title = $(this).parent().find("span").attr("towexin-title");
		let value = $(this).parent().find("span").attr("towexin-value");
		let check = $(this).parent().find("span").attr("towexin-check");
		let newOption = [];

		$.each(options, function(index, item) {
			if (item.title === title && item.value === value && item.check === check) {

			} else {
				newOption.push(item)
			}
		})
		$(".set-title-option").find("input[name=set-option]").val(JSON.stringify(newOption))

		$(this).parent().remove();
	})

	$("body").on("click", ".set-title-option .option-in a", function(event) {
		event.stopPropagation();

		let title = $(this).find("span").attr("towexin-title");
		let value = $(this).find("span").attr("towexin-value");
		let check = $(this).find("span").attr("towexin-check") == "true" ? true : false;

		form.val('attributes-set', {
			"close": check,
			"optionValue": value,
			"optionTitle": title
		});
		form.render();

		openOptionIn($(this).parent().parent());
	})

	$("body").on("click", ".set-title-option .layui-anim", function(event) {
		event.stopPropagation();
	})


	// 开启添加选项模态框
	$("body").on("click", ".option-in", function(event) {
		event.stopPropagation();

		form.val('attributes-set', {
			"close": false,
			"optionValue": "",
			"optionTitle": ""
		});

		openOptionIn($(this));
	})

	// 设置选项
	$("body").on("click", ".set-title-option .layui-anim .layui-btn", function() {
		let options = JSON.parse($(".set-title-option").find("input[name=set-option]").val());
		let title = $(".set-title-option .layui-anim").find("input[name=optionTitle]").val();
		let value = $(".set-title-option .layui-anim").find("input[name=optionValue]").val();
		let checkbok = $(".set-title-option .layui-anim").find("input[name=switchValue]").val() ? $(".set-title-option .layui-anim").find("input[name=switchValue]").val() : "false";
		let newIndex = -1;

		if (title != "" && value != "") {
			$.each(options, function(index, item) {
				if (title == item.title) {
					newIndex = index
				}
			})

			if (newIndex == -1) {
				if (checkbok == "true") {
					$("#set-attributes .set-title-option").find(".input-option").append($('<a href="javascript:;"></a>').append($(
						"<span></span>").append(title + ": " + value).attr({
						"towexin-value": value,
						"towexin-title": title,
						"towexin-check": checkbok
					})).append($('<i class="layui-icon">ဆ</i>')).css("background-color", "#ff5722"));
				} else {
					$("#set-attributes .set-title-option").find(".input-option").append($('<a href="javascript:;"></a>').append($(
						"<span></span>").append(title + ": " + value).attr({
						"towexin-value": value,
						"towexin-title": title,
						"towexin-check": checkbok
					})).append($('<i class="layui-icon">ဆ</i>')));
				};

				options.push({
					title: title,
					value: value,
					checkbok: checkbok
				})
			} else {
				if (checkbok == "true") {
					$($("#set-attributes .set-title-option").find(".input-option").children("a")[newIndex]).css("background-color",
						"#ff5722");
					$($("#set-attributes .set-title-option").find(".input-option").children("a")[newIndex]).children("span").text(
						title + ": " + value).attr({
						"towexin-value": value,
						"towexin-title": title,
						"towexin-check": checkbok
					})

				} else {
					$($("#set-attributes .set-title-option").find(".input-option").children("a")[newIndex]).css("background-color",
						"#5FB878");
					$($("#set-attributes .set-title-option").find(".input-option").children("a")[newIndex]).children("span").text(
						title + ": " + value).attr({
						"towexin-value": value,
						"towexin-title": title,
						"towexin-check": checkbok
					})
				};

				options.splice(newIndex, 1, {
					title: title,
					value: value,
					checkbok: checkbok
				})
			}

			$(".set-title-option").find("input[name=set-option]").val(JSON.stringify(options))
		}
		$(".set-title-option .layui-unselect").toggleClass("layui-form-selected");
		$(".set-title-option .layui-anim").find("input[name=optionTitle]").val("");
		$(".set-title-option .layui-anim").find("input[name=optionValue]").val("");
		$(".set-title-option .layui-anim").find("input[name=switchValue]").val("false")

		form.val('attributes-set', {
			"close": false,
			"switchValue": ""
		});
	})



	let openOptionIn = function(elem) {
		let dlHeight = elem.next("dl").height() + 12;
		let bottomHeight = $(window).height() - elem.offset().top + $(document).scrollTop() - 18 - elem.height()

		if (bottomHeight < dlHeight) {
			elem.next("dl").css({
				"top": "auto",
				"bottom": elem.height() + 16 + "px"
			});
		} else {
			elem.next("dl").css({
				"top": elem.height() + 16 + "px",
				"bottom": "auto"
			});
		}
		elem.parent().toggleClass("layui-form-selected");
	}

})
